<template>
    <div>
        <van-nav-bar left-text="返回" left-arrow @click-left="$router.push('/')" />
        <div class="myChannel">
            <div class="myChannel-top">
                <div class="myChannel-top-text">我的频道</div>
                <van-button class="myChannel-top-btn" plain round type="primary" @click="btnTextFlag = !btnTextFlag">
                    {{btnTextFlag ? '编辑':'完成'}}</van-button>
            </div>
            <div class="myChannel-list">
                <div v-for="(item, index) in myChannelList" :key="index" class="channelBox">{{item.name}}
                    <van-icon v-show="item.id !== 0 && !btnTextFlag" class="closeBtn" name="close"
                        @click="delChannel(item)" />
                </div>
            </div>
        </div>
        <div class="recommendChannel">
            <div class="myChannel-top">
                <div class="myChannel-top-text">频道推荐</div>
            </div>
            <div class="recommendChannel-list">
                <div v-for="(item, index) in recommendChannelList" :key="index" class="channelBox"
                    @click="addToMyChannelList(item)">{{item.name}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 我的频道列表
                myChannelList: [],
                // 所有频道列表
                recommendChannelList: [],
                // 编辑按钮和完成按钮的显示
                btnTextFlag: true
            }
        },
        methods: {
            // 获取当前用户频道列表
            async getUserChannelList() {
                let {
                    data: res
                } = await this.$http.get('/user/channels')
                if (res.message == 'OK') {
                    this.myChannelList = res.data.channels
                }
            },
            // 获取所有频道列表
            async getAllChannelList() {
                let {
                    data: res
                } = await this.$http.get('/channels')
                if (res.message == 'OK') {
                    this.recommendChannelList = res.data.channels
                }
            },
            // 将频道添加到我的频道
            addToMyChannelList(data) {
                let flag = true
                this.myChannelList.forEach(v => {
                    if (v.id === data.id) {
                        flag = false
                    }
                })
                if (!flag) return this.$toast.fail('频道已存在！')
                // 如果没有重复，则添加到我的频道
                this.$http.patch('/user/channels', {
                    channels: [{
                        id: data.id,
                        seq: data.id
                    }]
                }).then(res => {
                    if (res.data.message == "OK") {
                        this.$toast.success('添加成功！')
                        this.myChannelList.push(data)
                    }
                })
            },
            // 从我的频道列表中删除某一频道
            delChannel(data) {
                this.$http.delete(`/user/channels/${data.id}`).then(res => {
                    if (res.status == 204) {
                        this.getUserChannelList()
                    }
                })
            },
        },
        mounted() {
            this.getUserChannelList()
            this.getAllChannelList()
        }
    }
</script>

<style lang="scss">
    .myChannel,
    .recommendChannel {
        margin-top: 15px;

        .myChannel-top {
            display: flex;
            font-size: 16px;
            padding: 0px 12px;
            align-items: center;

            .myChannel-top-btn {
                width: 60px;
                height: 25px;
                margin-left: auto;
            }
        }
    }

    .recommendChannel-list,
    .myChannel-list {
        display: flex;
        padding: 5px 10px;
        box-sizing: border-box;
        width: 375px;
        flex-wrap: wrap;
    }

    .myChannel-list {

        .closeBtn {
            position: absolute;
            right: -8px;
            top: -8px;
            color: #aaa;
        }
    }

    .channelBox {
        position: relative;
        min-width: 80px;
        height: 43px;
        text-align: center;
        line-height: 43px;
        background: #f4f5f6;
        font-size: 16px;
        border-radius: 5px;
        margin: 5px 4px;
    }
</style>